<template>
    <div class="select-tool" style="display:inline-block">
        <div class="inline">
            <span>系统</span>
            <el-select v-model="p_system" clearable placeholder="全部" @input="val=>Update('system',val)">
                <el-option v-for="(val, key) in systemList" :key="key" :label="key" :value="val" />
            </el-select>
        </div>
        <div class="inline">
            <span>渠道</span>
            <el-select v-model="p_channel" clearable placeholder="全部" @input="val=>Update('channel',val)">
                <el-option v-for="(val, key) in channelList" :key="key" :label="key" :value="val" />
            </el-select>
        </div>
        <div class="inline">
            <span>城市</span>
            <el-select
                v-model="p_city"
                clearable
                style="width:120px"
                filterable
                placeholder="全部"
                @input="val=>Update('city',val)"
            >
                <el-option v-for="(val, index) in cityList" :key="index" :label="val" :value="val" />
            </el-select>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SelectTools',
    components: {

    },
    props: {
        system: String,
        channel: String,
        city: String
    },
    data () {
        return {
            cityList: null,
            channelList: {
                'APP Store': 'apple',
                砂锅渠道: 'self',
                应用宝: 'tencent',
                华为: 'huawei'
            },
            systemList: {
                安卓: 'android',
                IOS: 'ios',
                H5: 'web'
            },
            p_city: null,
            p_channel: null,
            p_system: null
        }
    },
    computed: {

    },
    watch: {

    },
    created () {
        HTTP('城市列表').then(({ data }) => (this.cityList = data))
        this.p_system = this.system || null
        this.p_city = this.city || null
        this.p__channel = this.channel || null
    },
    mounted () {

    },
    methods: {
        Update (name, val) {
            console.log(val)

            this.$emit('update:' + name, val)
        }
    }
}
</script>

<style scoped lang="stylus">
.select-tool
    >>> .el-select
        width 100px
    >>> .inline
        display inline-block
        margin 5px 10px
    >>> span
        margin-right 5px
</style>
